<template>
  <view class="container">
    <u-subsection :list="list" :current="current" @change="sectionChange" bgColor="#FFFFFF" activeColor="#FFFFFF"
      inactiveColor="#60A4F7"></u-subsection>

    <view class="device_desc_group">
      <u-cell-group v-if="current === 0">
        <u-cell :title="item.title" v-for="(item, index) in descList" :key="index" :isLink="item.isLink">
          <view slot="value">
            <!-- <u-input v-if="item.title === '设备名称'" :border="false" inputAlign="right" v-model="title"
              placeholder="请输入设备名称" color="#BABABA" /> -->

              <view style="color: #bababa" v-if="item.title === '设备名称'">
              {{ device.name }}
            </view>

            <view style="color: #bababa" v-else-if="item.title === 'ICCID'">
              {{ device.iccid }}
            </view>

            <view style="color: #bababa" v-else-if="item.title === '入网时间'">
              {{ device.createTime }}
            </view>

            <view v-else>
              <text style="color: #bababa">{{ item.value }}</text>
            </view>
          </view>
        </u-cell>
      </u-cell-group>

      <u-cell-group v-else>
        <u-cell :title="item.title" v-for="(item, index) in descCardList" :key="index" :isLink="item.isLink">
          <view slot="value">
            <text style="color: #bababa">{{ item.value }}</text>
          </view>
        </u-cell>
      </u-cell-group>
    </view>

    <!-- 保存设置 -->
    <view class="save_settings" v-if="current === 0">
      <text class="save_settings_text">保存设置</text>
    </view>

    <view class="save_settings" v-else-if="current === 1" @click="goToRechargePage">
      <text class="save_settings_text">充值</text>
    </view>
  </view>
</template>

<script>
import { queryDeviceById } from '../../../../api';

export default {
  components: {},
  data() {
    return {
      // 页面参数
      options: {},
      list: ["设备信息", "物联网卡"],
      current: 0,
      descList: [
        {
          title: "设备名称",
          value: "遥控器",
          isLink: true,
        },
        {
          title: "设备编号",
          value: "123412341234",
        },
        {
          title: "ICCID",
          value: "2135123512351235123",
        },
        {
          title: "入网时间",
          value: "2024-01-22",
        },
        {
          title: "客服电话",
          value: "13544412221",
        },
        // {
        //   title: "用户反馈意见",
        //   value: "",
        //   isLink: true,
        // },
        {
          title: "常见问题",
          value: "",
          isLink: true,
        },
        {
          title: "使用说明",
          value: "",
          isLink: true,
        },
        // {
        //   title: "关于我们",
        //   value: "",
        //   isLink: true,
        // },
        // {
        //   title: "服务协议",
        //   value: "",
        //   isLink: true,
        // },
      ],
      descCardList: [
        {
          title: "激活日期",
          value: "2024-01-22",
        },
        {
          title: "到期日期",
          value: "2025-01-01",
        },
        {
          title: "用户状态",
          value: "正常",
        },
        {
          title: "本月总流量",
          value: "30MB",
        },
        {
          title: "本月使用流量",
          value: "3KB",
        },
        {
          title: "本月剩余流量",
          value: "29.5MB",
        },
        {
          title: "本月短信已用数",
          value: "8",
        },
      ],
      title: "",
      // 设备密码
      password: "",
      device: {},
      id: "",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

    this.id = options.id;
    this.getInfo(options.id)
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() { },

  methods: {
    async getInfo(id) {

      try {
        uni.showLoading({
          title: '加载中...',
        });
        const _res = await queryDeviceById({
          id: id
        })

        this.device = _res;
      } catch (error) {

      } finally {
        uni.hideLoading();
      }

    },
    sectionChange(index) {
      console.log("indexindexindex", index);
      this.current = index;
    },
    goToRechargePage() {
      uni.navigateTo({
        url: "/pages/index/IoTcard/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #f6f7fb;
  height: 100vh;

  padding-top: 34.091rpx;

  margin-left: 25.568rpx; 
  margin-right: 25.568rpx;

  ::v-deep .u-subsection--button__bar {
    background: #60a4f7 !important;
  }
}

.device_desc_group {
  background: white;
  border-radius: 17.045rpx;
  margin-top: 17.045rpx;
  

  // padding-left: 34.091rpx;
  // padding-right: 34.091rpx;

  /* 修改 u-cell-group 样式 */
  ::v-deep .u-cell__body {
    padding-left: 0rpx;
    padding-right: 0rpx;
  }

  ::v-deep .u-line {
    border-bottom: 1.705rpx solid #f6f7fb !important;
  }
}

.save_settings {
  margin-top: 51.136rpx; 
  height: 83.523rpx;
  margin-left: 25.568rpx;
  background: #60a4f7;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 43.582rpx;

  .save_settings_text {
    color: white;
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 290;
    line-height: 34.006rpx;
    text-align: left;
  }
}
</style>
